<template>
  <div :class="['header', bgColorType === 1 ? 'header-1' : '']">
    <div class="content-wrapper">
      <div class="logo-wrapper">
        <p>公司简介</p>
      </div>
      <div class="nav-wrapper">
        <ul class="nav-ul">
          <li
            :class="['nav-li', index === hoverIndex ? 'nav-active' : '', index == nowIndex ? 'nav-big-font' : '']"
            v-for="(nav, index) in navs"
            :key="index"
            @click="clickNav(index)"
            @mouseover="onMouseOver(index)"
            @mouseout="onMouseOut(index)"
          >
            <!-- <div
              class="nav-border"
              v-show=" index == nowIndex"
            ></div> -->
            {{navs[index]['name']}}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      navs: [
        { name: "公司简介", url: "/" },
        { name: "项目介绍", url: "/desc" },
        { name: "相关业务", url: "/business"},
        { name: "联系我们", url: "/contact" }
      ],
      hoverIndex: null,
      hoverOnList: false,
      nowIndex: 0
    };
  },
  props: {
    bgColorType: {
      default: 0,
      type: Number
    }
  },
  mounted() {
    this.navs.forEach((item,index) => {
      if (item.url == this.$route.path) {
        this.nowIndex = index;
      }
    })
  },
  methods: {
    backToMain() {
      console.log(1);
    },
    clickNav(index) {
      this.$emit("click-nav", index);
      this.$router.push(this.navs[index]['url']);
      this.nowIndex = index;
    },
    onMouseOver(index) {
      this.hoverIndex = index;
    },
    onMouseOut() {
      this.hoverIndex = null;
    }
  },
  watch: {
    nowIndex(val) {
      if (val !== 1) {
        this.hoverOnList = false;
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
$background:white;
$hover-background:#39AC5F;
$text-color:#757575;
$hover-text-color:white;
.header {
  /* width: 1920px; */
  width: 100%;
  height: 80px;
  background: $background;
  box-sizing: border-box;
  margin-bottom: 4px;
  font-size: 18px;
}
.content-wrapper {
  width: 1200px;
  margin: 0 auto;
  height: 80px;
  min-height: 80px;
  min-width: 1200px;
  display: flex;
  justify-content: space-between;
}
.logo-wrapper {
  display: inline-block;
  /* margin-left: 360px; */
  /* padding: 15px; */
  height: 80px;
  line-height: 80px;
  color:$hover-background;
  font-size: 35px;
  font-weight:bold;
}
.logo-img {
  width: 160px;
  height: 40px;
  margin-top: 10px;
}
.nav-wrapper {
  display: inline-block;
  /* margin-left: 30%; */
  height: 80px;
  // min-width: 740px;
  vertical-align: top;
  position: relative;
}
.nav-li {
  font-size: 18px;
  display: inline-block;
  height: 80px;
  text-align: center;
  line-height: 80px;
  color: $text-color;
  cursor: pointer;
  /* transition:rgba(255, 255, 255, 0.1) 0.3s linear; */
  position: relative;
  margin: 0 20px;
}
.nav-active {
  color: $hover-background;
  border-bottom: 4px solid $hover-background
}
.nav-big-font {
  color: $hover-background;
  border-bottom: 4px solid $hover-background;
  font-weight: bold;
}
.nav-border {
  position: absolute;
  width: 20px;
  top: 56px;
  left: 50px;
  border-bottom: 4px solid #00dec1;
}
.nav-main {
  color: #1bf1fe;
  text-decoration: underline;
}
.header-1 {
  background: #ffffff;
}
.header-1 .nav-li {
  color: #9595c4;
}
.header-1 .nav-active {
  color: white;
}
</style>
